<template>
  <div class="app-main">
    <div class="operation-contain">
      <div class="operation-left">
        <el-input v-model="list.filters.search" placeholder="请输入搜索内容" clearable prefix-icon="el-icon-search" size="medium" @input="getMenuList"></el-input>
        <el-select v-model="list.filters.status" placeholder="请选择" clearable size="medium" @change="getMenuList">
          <el-option label="启用" value="true"></el-option>
          <el-option label="停用" value="false"></el-option>
        </el-select>
      </div>
      <div class="operation-right">
        <el-button type="primary" @click="$refs.myDialog.open()" size="mini" class="el-icon-circle-plus-outline pad" plain> 新增</el-button>
        <d-dropdown :isShow.sync="isShow"/>
      </div>
    </div>
    <div class="table-contain">
      <el-table
        ref="table"
        :data="list.data"
        style="width: 100%;"
        row-key="id"
        border
        v-loading="list.loading"
        @sort-change="sortChange"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column label="菜单名称" sortable="custom" prop="name" min-width="120">
          <template v-slot="{ row }">
            {{ row.name }}
          </template>
        </el-table-column>
        <el-table-column label="图标" width="90" align="center" sortable="custom" prop="icon">
          <template v-slot="{ row }">
            <i :class="row.icon" style="font-size: 18px;"></i>
          </template>
        </el-table-column>
        <el-table-column label="类型" width="90" align="center" sortable="custom" prop="type">
          <template v-slot="{ row }">
            <el-tag :type="row.type === '目录' ? 'primary' : 'success'">
              {{ row.type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="组件名称" align="center" sortable="custom" prop="component" min-width="120">
          <template v-slot="{ row }">
            {{ row.component }}
          </template>
        </el-table-column>
        <el-table-column label="路由地址" align="center" sortable="custom" prop="url" min-width="120">
          <template v-slot="{ row }">
            {{ row.url }}
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[0].value" label="排序" width="90" align="center" sortable="custom" prop="order">
          <template v-slot="{ row }">
            {{ row.order }}
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[1].value" label="状态" width="90" align="center" sortable="custom" prop="status">
          <template v-slot="{ row }">
            <el-switch
              v-model="row.status" @change="changeStatus(row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[2].value" label="创建时间" align="center" sortable="custom" prop="ctime" min-width="180">
          <template v-slot="{ row }">
            {{ row.ctime }}
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[3].value" label="更新时间" align="center" sortable="custom" prop="mtime" min-width="180">
          <template v-slot="{ row }">
            {{ row.mtime }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140" align="center" >
          <template v-slot="{ row }">
            <el-button type="success" icon="el-icon-edit" size="mini" class="pad" @click="$refs.myDialog.detaliInfo(row.id)"></el-button>
            <el-popconfirm
              @confirm="confirmDelete(row.id)"
              title="确定删除这条信息吗？">
              <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <dPagination :page.sync="list.page" :size.sync="list.size" :total="list.total" @getList="getMenuList" />
    <!-- <my-dialog ref="myDialog" :dialogVisible.sync="dialogVisible" @getAll="getMenuList" :list="list.data" /> -->
  </div>
</template>

<script>
// import myDialog from './Dialog'
export default {
  name: 'SystemMenu',
  components: {
    // myDialog
  },
  data () {
    return {
      isShow: [
        { label: '排序', value: false, disable: false },
        { label: '状态', value: true, disable: false },
        { label: '创建时间', value: true, disable: false },
        { label: '更新时间', value: false, disable: false },
      ],
      list: {
        data: [],
        loading: false,
        page: 1,
        total: 0,
        size: 10,
        filters: {
          search: '',
          status: null,
          prop: '',
          order: ''
        }
      },
      dialogVisible: false,
    }
  },
  created () {
    this.getMenuList()
  },
  methods: {
    changeStatus (val) { // switch 触发回调更新菜单状态
      this.$API({
        name: 'updateMenu',
        data: {
          id: val.id,
          status: val.status
        }
      }).then(res => {
        if (res.data.code === 200 && res.data.data[0] === 1) {
          this.$notify.success(res.data.msg)
          this.getMenuList()
        } else {
          this.$notify.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
      })
    },
    // 排序回调（prop 排序字段 order 排序方式）
    sortChange (column) {
      if (column.order == 'ascending') {
        this.list.filters.order = 'asc'
      } else {
        this.list.filters.order = 'desc'
      }
      this.list.filters.prop = column.prop
      this.getMenuList()
    },
    getMenuList () { // 获取菜单列表
      this.list.loading = true
      this.$API({
        name: 'getMenuList',
        params: {
          page: this.list.page,
          size: this.list.size,
          search: this.list.filters.search,
          status: this.list.filters.status,
          order: this.list.filters.prop,
          sort: this.list.filters.order
        }
      }).then (res => {
        if (res.data.code === 200) {
          this.list.data = res.data.data.data
          this.list.total = res.data.data.count
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
        this.list.loading = false
      })
    },
    confirmDelete (id) { // 删除
      this.$API({
        name: 'deleteMenu',
        paths: [id]
      }).then (res => {
        if (res.data.code === 200 && res.data.data === 1) {
          this.$message.success(res.data.msg)
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
        this.getMenuList()
      })
    },
  },
  // 解决 el-table 更新列时的抖动问题
  beforeUpdate() {
    this.$nextTick(() => {
      // 在数据加载完，重新渲染表格
      this.$refs.table.doLayout()
    }) 
  },
}
</script>

<style lang="scss" scoped>
.el-input-number {
  width: 205px !important;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.pad {
  margin-right: 10px;
}
.app-main {
  background: #fff;
  box-sizing: border-box;
  margin-right: 25px;
  padding: 10px 10px 45px 10px;
  width: 100%;
  min-height: 100%;
  .operation-contain {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .operation-left {
      .el-input {
        margin-right: 10px;
      }
      .el-input, .el-select {
        width: 175px;
        margin-bottom: 10px;
      }
    } 
  }
  .table-contain {
    padding: 10px 0 10px 0;
  }
  .page-contain {
    position: absolute;
    box-sizing: border-box;
    padding: 5px 10px;
    bottom: 0px;
    left: 0px;
    background-color: #fff;
    width: calc(100% - 15px);
    z-index: 1000;
    border-top: 1px solid #f1f1f1;
  }
}
</style>